<template>
  <div class="jtab" v-if="list.length > 0">
    <tiny-radio-group v-model="model" :size="size"  @change="change">
      <tiny-radio-button
          :label="item.id"
          v-for="(item,index) in list"
          :key="index">{{ item.name }}</tiny-radio-button>
    </tiny-radio-group>
  </div>
</template>
<script setup>
import {ref} from "vue";
import {TinyRadioGroup, TinyRadioButton} from "@opentiny/vue";
const props = defineProps({
  list: {type: Array, default: () => { return [] }},
  size: {type: String, default: 'small'},
  inject: { type: Boolean, default: false },
})
const emit = defineEmits(['change'])

const fApi = ref({})
const model = defineModel()

const change = (val) => {
  if(props.inject) {
    emit('change', fApi.value, val)
  }
  else {
    emit('change', val)
  }
}
const setApi = (api) => {
  fApi.value = api
}

defineExpose({ setApi})

</script>
<style lang="scss">
.jtab {
  border: 1px solid rgba(0,0,0,0.2);
  border-radius: 4px;
}
</style>